<template>
  <div>
    <div class="add">
      <a-card class="add-card">
        <div class="add-box">
          <span>数据列表</span>
          <a-button class="add-btn" type="small">添加</a-button>
        </div>
      </a-card>
    </div>
    <div class="commodityType">
      <a-card class="commodityType-card">
        <a-table
          :columns="columns"
          :data-source="data"
          :row-selection="rowSelection"
          bordered
        >
          <span slot="brand_manufacturers" class="brand_manufacturers">
            <a-button> 属性列表 </a-button>
            <a-button> 参数列表 </a-button>
          </span>
          <span slot="operation" class="operation">
            <a-button> 编辑 </a-button>
            <a-button type="danger"> 删除 </a-button>
          </span>
        </a-table>
      </a-card>

    </div>

  </div>
</template>

<script>
const columns = [
  {
    title: '编号',
    dataIndex: 'commodity_id',
    align: 'center'
  },
  {
    title: '类型名称',
    dataIndex: 'commodity_name',
    align: 'center',
    width: 400
  },
  {
    title: '属性数量',
    dataIndex: 'commodity_quantity',
    align: 'center'
  },
  {
    title: '参数数量',
    dataIndex: 'commodity_parameter',
    align: 'center'
  },
  {
    title: '设置',
    dataIndex: 'brand_manufacturers',
    scopedSlots: { customRender: 'brand_manufacturers' },
    align: 'center'
  },
  {
    title: '操作',
    dataIndex: 'operation',
    scopedSlots: { customRender: 'operation' },
    align: 'center'
  }
]

const data = [
  {
    key: '1',
    commodity_id: '1',
    commodity_name: '服装-T恤',
    commodity_quantity: 2,
    commodity_parameter: 5
  },
  {
    key: '2',
    commodity_id: '2',
    commodity_name: '服装-T恤',
    commodity_quantity: 2,
    commodity_parameter: 5
  },
  {
    key: '3',
    commodity_id: '3',
    commodity_name: '服装-T恤',
    commodity_quantity: 2,
    commodity_parameter: 5
  }
]

const rowSelection = {
  onChange: (selectedRowKeys, selectedRows) => {
    console.log(
      `selectedRowKeys: ${selectedRowKeys}`,
      'selectedRows: ',
      selectedRows
    )
  },
  onSelect: (record, selected, selectedRows) => {
    console.log(record, selected, selectedRows)
  },
  onSelectAll: (selected, selectedRows, changeRows) => {
    console.log(selected, selectedRows, changeRows)
  }
}

export default {
  data() {
    return {
      data,
      columns,
      selectedRowKeys: [], // Check here to configure the default column
      loading: false,
      rowSelection
    }
  }
}
</script>

<style lang="scss">
.search {
  .search-card {
    margin: 20px;
    .search-top {
      display: flex;
      justify-content: space-between;
      font-size: 16px;
    }
    .search-buttom {
      margin-left: 20px;
    }
  }
}

.add {
  .add-card {
    margin: 20px;
    .add-box {
      display: flex;
      justify-content: space-between;
      span {
        font-size: 16px;
      }
    }
  }
}

.commodityType {
  margin: 20px;
  .brand_manufacturers {
    display: flex;
    justify-content: space-around;
  }
  .operation {
    .ant-btn {
      margin-right: 10px;
    }
  }
}

</style>
